<template>
  <!-- 设置一个版心 -->
  <div class="main-container">
    <div class="type-area">
      <div class="nav">
        <!-- 颜色在当前页面切换的时候会有变化,当前购物车页面应该些判断的时候会显示黑色 -->
        <span class="detail">1.购物车详情 </span>
        <span>2.登录注册<i>&gt;</i></span>
        <span>3.配送方式<i>&gt;</i></span>
        <span>4.支付<i>&gt;</i></span>
      </div>
      <div class="bottom-container">
        <section class="left">
          <Product :index="1" @reShopcart='getShopcart($event)'/>
          <div class="left-order">
            <ul>
              <li class="next-shop">
                <button>&lt;
                  <router-link to="/search">继续购物</router-link>
                </button>
              </li>
              <li class="order-mount">订单总额:<em>￥{{allMoney}}</em></li>
              <li>
                <button class="settle">
                  <router-link class="toOrder" to="/order"
                    >结算&nbsp;&nbsp;&nbsp;&nbsp;&gt;</router-link
                  >
                </button>
              </li>
            </ul>
          </div>
          <div class="line">
            <h2>收藏夹</h2>
          </div>
          <div class="left-main">
            <Product />
          </div>
          <div class="history">
            <h2>历史浏览</h2>
            <swiper></swiper>
          </div>
        </section>
        <aside class="right">
          <div class="collect">
            <h2>订单汇总</h2>
            <div class="amount">商品总额<em>￥{{allMoney}}</em></div>
            <div class="ticket">输入优惠券码<strong>?</strong></div>
            <div class="total">订单总额<em>￥{{allMoney}}</em></div>
            <div class="account">
              <button>
                <router-link class="toOrder" to="/order">结算</router-link>
                <i>&gt;</i>
              </button>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Product from "./product";
import swiper from "./swiper";
export default {
  name: "shopCart",
  data() {
    return {
      
    };
  },
  components: { Product, swiper },
  methods:{
    getShopcart(shopCart){  
       
    }
  },
  computed:{
     ...mapState({
      shopCartList: (state) => state.shopcart.shopCartList,
    }),
      // 计算总价格
    allMoney() {
      return this.shopCartList.reduce((prev, item) => {
        prev += item.cartInfoList.reduce((prev1, item1) => {
          if (item1.isChecked) {
            prev1 += item1.skuNum * item1.skuPrice;
          }
          return prev1;
        }, 0);
        return prev;
      }, 0);
    },
  }

};
</script>

<style lang="less">
.clear-float() {
  content: "";
  display: block;
  clear: both;
  height: 0;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
dt,
dd,
li,
p,
form,
input {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
}
button {
  outline: none;
  border: none;
}
ul,
ol {
  /* 去掉小圆点和数字 */
  list-style: none;
}
i,
em {
  /* 不倾斜 */
  font-style: normal;
}
b,
strong {
  font-weight: 400;
}
body {
  width: 100%;
  height: 100%;
  background-color: #edeff1;
  .main-container {
    .type-area {
      width: 1200px;
      margin: 0 auto;
      .nav {
        width: 1200px;
        height: 97px;
        font-size: 26px;
        color: #7d7e80;
        text-align: center;
        margin: 40px 0 5px;
        .detail {
          color: #000;
        }
        span {
          display: block;
          float: left;
          margin-top: 30px;
          padding-right: 15px;
          i {
            font-style: normal;
            display: block;
            margin: auto 15px;
            display: block;
            float: left;
            font-size: 25px;
            font-weight: 300;
            font-family: DecathlonCube;
          }
        }
      }
      .bottom-container {
        display: flex;
        // width: 100%;
        // height: 100%;
        // background-color: greenyellow;
        .left {
          width: 75%;
          // 这个地方的高度需要去掉,因为页面是需要随着购物车内容继续撑开的
          height: 2542px;
          .left-order {
            width: 100%;
            height: 80px;
            // background-color: rosybrown;
            float: left;
            display: flex;
            ul {
              background: #edeff1;
              width: 94%;
              display: flex;
              .next-shop {
                width: 121%;
              }
              .order-mount {
                color: #7d7e80;
                font-size: 18px;
                font-weight: 700;
                padding: 10px 0;
                em {
                  color: #323233;
                  font-weight: 700;
                  font-size: 14px;
                }
              }
              li {
                font-size: black;
                margin-top: 20px;
                width: 30%;
                // float: left;
                button {
                  font-size: 14px;
                  font-weight: 700;
                  font-size: 15px;
                  float: left;
                  text-align: center;
                }
                .settle {
                  width: 128px;
                  height: 40px;
                  background: #ffea28;
                  float: right;
                  // margin-right: 30px;
                  .toOrder {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    line-height: 39px;
                  }
                }
              }
            }
          }
          .line {
            float: left;
            width: 100%;
            color: yellowgreen;
            border-top: 1px solid #d4d7d9;
            margin-top: 30px;
            h2 {
              margin: 40px 0;
              color: #575859;
              font-size: 18px;
              font-weight: 400;
            }
          }
          .left-main {
            float: left;
            width: 100%;
            height: 500px;
          }
          .history {
            float: left;
            height: 61px;
            width: 98%;
            margin-top: 100px;
            h2 {
              padding: 0 20px;
              box-shadow: -2px 5px 4px 0 rgb(0 83 125 / 10%);
              height: 61px;
              line-height: 61px;
              width: 92%;
            }
          }
        }
        .right {
          width: 25%;
          float: left;
          padding-top: 22px;
          .collect {
            width: 280px;
            height: 222px;
            background: #fff;
            float: right;
            h2 {
              height: 39px;
              line-height: 39px;
              text-align: center;
              font-weight: 400;
              font-size: 18px;
              color: inherit;
              font-style: italic;
              background: #edeff1;
              box-shadow: 0px 2px 6px 2px rgb(0 83 125 / 10%);
            }
            .amount {
              height: 39px;
              padding: 10px 20px;
              font-weight: 400;
              font-size: 14px;
              em {
                display: block;
                float: right;
                color: #323233;
                font-size: 12px;
              }
            }
            .ticket {
              height: 13px;
              padding: 0 21px 20px;
              text-decoration: underline;
              strong {
                display: block;
                float: right;
              }
            }
            .total {
              height: 23px;
              padding: 14px 20px;
              font-weight: 700;
              font-size: 12px;
              border-top: 1px solid #edeff1;
              em {
                display: block;
                float: right;
                font-weight: 700;
                color: #323233;
                font-size: 16px;
              }
            }
            .account {
              height: 39px;
              padding: 0 10px;
              color: #323233;
              font-size: 14px;
              button {
                width: 263px;
                height: 39px;
                background-color: #fdd935;
                transition: background-color 0.18s ease 0.09s;
                color: #323233;
                font-weight: 700;
                padding: 0 15px;
                position: relative;

                .toOrder {
                  display: inline-block;
                  width: 100%;
                  height: 100%;
                  line-height: 39px;
                }
                i {
                  display: block;
                  float: right;
                  position: absolute;
                  top: 11px;
                  left: 238px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
